(function (window) {
	'use strict';

	// 声明对象储存所有用于进行事项类别筛选的函数
	let filters = {
		all(todos) {
			return todos;
		},
		active(todos) {
			return todos.filter(todo => !todo.completed);
		},
		completed(todos) {
			return todos.filter(todo => todo.completed);
		}
	};

	// 声明常量用于储存本地储存中保存事项的键
	const TODOS_KEY = "todos-vue";
	// 声明对象统一保存本地储存的功能
	let todoStorage = {
		// 用于读取本地储存数据
		get() {
			// JSON.parse(): 将 json 格式对象转化为 js 对象结构 读取数据
			return JSON.parse(localStorage.getItem(TODOS_KEY)) || [];
		},
		// 用于更新本地储存数据
		set(todos) {
			localStorage.setItem(TODOS_KEY, JSON.stringify(todos));
		}
	};

	new Vue({
		el: "#app",
		data: {
			// todos 用于储存所有事项信息
			// todos: [
			// 	{ id: 1, title: "示例内容1", completed: true },
			// 	{ id: 2, title: "示例内容2", completed: false },
			// 	{ id: 3, title: "示例内容3", completed: false },
			// ],
			todos: todoStorage.get(),
			// 出错新增输入框数据
			newTodo: "",
			// 储存正在编辑的 todo
			editingTodo: null,
			// 储存正在编辑的 todo 的原始内容
			titleBeforEdit: "",
			// 储存要显示的事项类别
			todoType: "all",
		},
		// 监听数据变化
		watch: {
			todos: {
				deep: true,
				handler: todoStorage.set
			}
		},
		computed: {
			// 用于进行事项筛选处理
			filteredTodo() {
				return filters[this.todoType](this.todos);
			},
			// 用于获取待办信息
			remaining() {
				return filters.active(this.todos).length;
			},
			// 用于设置全部切换选框状态
			allDone: {
				get() {
					return this.remaining === 0;
				},
				set(value) {
					// value 代表全部切换选框的状态(是否选中)
					this.todos.forEach(todo => {
						todo.completed = value;
					})

				}
			}
		},
		methods: {
			// 用于进行单位复数化处理
			pluralize: function (word) {
				return word + (this.remaining === 1 ? "" : "s");
			},
			// 用于事项新增
			addTodo() {
				var value = this.newTodo.trim(); // 去除 首尾 空格
				// 判断是否为新内容 不是则返回
				if (!this.newTodo) {
					return;
				};
				// 添加新输入内容
				this.todos.push({ id: this.todos.length + 1, title: value, completed: false });
				// 保存后清空内容
				this.newTodo = "";
			},
			// 用于删除当个事项
			removeTodo(todo) {
				var index = this.todos.indexOf(todo);
				this.todos.splice(index, 1);
			},
			// 用于删除已完成事项
			removeCompleted() {
				this.todos = filters.active(this.todos);
			},
			// 用于触发编辑，保存相关信息
			editTodo(todo) {
				this.editingTodo = todo;
				this.titleBeforEdit = todo.title;
			},
			// 用于取消编辑，还原状态与内容
			cancelEdit(todo) {
				this.editingTodo = null;
				todo.title = this.titleBeforEdit;
			},
			// 用于保存编辑
			editDone(todo) {
				// 检测 editingTodo 不重复删除
				if (!this.editingTodo) return;
				// 取消编辑状态
				this.editingTodo = null;
				todo.title = todo.title.trim();
				// 如果保存时 事项为空 删除当前 todo
				if (!todo.title) {
					this.removeTodo(todo);
				}
			},
		},
		directives: {
			// 用于设置正在编辑得事项框获取焦点
			"todo-focus"(el, binding) {
				// el : 自定义指定元素（Dom元素） binding: 接收指令相关信息
				if (binding.value) {
					el.focus();
				}
			}
		}
	})

})(window);
